
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://cdn.jsdelivr.cn/npm/@bootcss/v3.bootcss.com@1.0.44/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/dashboard/">
    <title>无忧饮食控制台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      #app{
        display: flex;
      }
      .nav{
        flex:1;
        width: 30%;
        height: 500px;
      }
      content{
        flex:4;
      }
      ul{
        list-style: none;
      }
      li{
        height:60px;
        line-height:60px;
        border-bottom: 1px solid black;
        text-align: center;
      }
      a{
        text-decoration:none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="nav">
        <ul >
          <h1>无忧饮食</h1>
          <li v-on:click="userOption"><a href="/user">用户管理</a></li>
          <li v-on:click="foodOption"><a href="/food">食谱管理</a></li>
          <li v-on:click="addFood"><a href="/addFood">添加食谱</a></li>
          <li v-on:click="exits"><a href="/admin">退出系统</a></li>
        </ul>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main content">
        <h2 class="sub-header">控制台</h2>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>用户id</th>
                <th>姓名</th>
                <th>bmi</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in users" :key="item._id">
                <td>{{item._id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.bmi}}</td>
                <td>
                  <input type="button" value="删除" v-bind:data-userId="item._id" v-on:click="delUser(item._id)">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.cn/npm/@bootcss/v3.bootcss.com@1.0.44/assets/js/vendor/holder.min.js"></script>
    <script>
        var vm = new Vue({
          el:'#app',
          data:{
            users:[],
            foods:[]
          },
          methods:{
            userOption(){
              let that = this
              axios.get('http://localhost:8080/allUser').then(data=>{
                that.users = data.data
              })
            },
            foodOption(){

            },
            addFood(){

            },
            delUser(userId){
              let that = this
              axios.delete('http://localhost:8080/delUserById?userId='+userId).then(data=>{
                if (data.data) {
                  alert('删除用户成功')
                  axios.get('http://localhost:8080/allUser').then(data=>{
                    that.users = data.data
                  })
                }
              })
            },
            exits(){
              alert('是否退出系统')
              
            }
          },
          created(){
            let that = this
              axios.get('http://localhost:8080/allUser').then(data=>{
                that.users = data.data
            })
          }
        })
    </script>
  </body>
</html>
